Vite Vanilla Installation

Follow this comprehensive guide to set up Vite for vanilla JavaScript projects. This tutorial includes all possible installation methods to accommodate different workflows.

Prerequisites

Ensure you have Node.js installed on your system. You can download it from the Node.js official website. Having Node.js installed will also set up npm (Node Package Manager) on your machine.

Installation Methods

1. Using `npm` (Node.js Package Manager)

Create a new directory for your project and navigate into it:
```
mkdir vite-vanilla-app
cd vite-vanilla-app
```
Initialize the project using Vite:
```
npm init @vitejs/app
```
Select the vanilla option when prompted.
Install the dependencies:
```
npm install
```
Start the development server:
```
npm run dev
```

2. Using `yarn`

Create and navigate to your project directory:
```
mkdir vite-vanilla-app
cd vite-vanilla-app
```
Initialize the project with Vite:
```
yarn create @vitejs/app
```
Select the vanilla option when prompted.
Install the dependencies:
```
yarn
```
Start the development server:
```
yarn dev
```

3. Using `pnpm`

Create and navigate to your project directory:
```
mkdir vite-vanilla-app
cd vite-vanilla-app
```
Initialize the project:
```
pnpm create vite
```
Select the vanilla option when prompted.
Install the dependencies:
```
pnpm install
```
Start the development server:
```
pnpm dev
```

4. Manual Setup (Without Scaffolding)

If you prefer setting up the project manually without using Vite’s scaffolding tool:

Create and navigate to your project directory:
```
mkdir vite-vanilla-app
cd vite-vanilla-app
```
Initialize a package.json file:
```
npm init -y
```
Install Vite as a development dependency:
```
npm install vite --save-dev
```

Create a basic project structure:

vite-vanilla-app/
├── index.html
├── main.js
└── package.json

index.html:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vite Vanilla</title>
</head>
<body>
  <script type="module" src="/main.js"></script>
</body>
</html>

main.js:
```
console.log('Hello, Vite!');
```

Add a start script to your package.json:

"scripts": {
  "dev": "vite",
  "build": "vite build",
  "serve": "vite preview"
}

Start the development server:
```
npm run dev
```

With these methods, you can set up Vite for your vanilla JavaScript projects quickly and easily. Choose the one that fits your workflow and start building modern, fast, and efficient applications!

Prerequisites​

Installation Methods​

1. Using npm (Node.js Package Manager)​

2. Using yarn​

3. Using pnpm​

4. Manual Setup (Without Scaffolding)​